<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">订单管理</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="container">
    <!-- 查询框 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="订单号" class="form-item">
        <el-input v-model="formInline.orderNumber" placeholder="输入订单号" />
      </el-form-item>

      <el-form-item label="客户姓名" class="form-item">
        <el-input v-model="formInline.customerName" placeholder="输入客户姓名" />
      </el-form-item>

      <el-form-item label="下单日期" class="form-item">
        <el-date-picker v-model="formInline.orderDate" type="date" placeholder="选择下单日期" clearable />
      </el-form-item>

      <el-form-item label="订单状态" class="form-item">
        <el-select v-model="formInline.orderStatus" placeholder="选择订单状态" clearable>
          <el-option label="待发货" value="pending" />
          <el-option label="已发货" value="shipped" />
          <el-option label="已完成" value="completed" />
          <el-option label="已取消" value="canceled" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="resetForm" style="margin-left: 10px">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="paginatedData" class="el-table" border>
      <el-table-column type="selection" width="55" />
      <el-table-column label="订单号" min-width="150">
        <template #default="scope">{{ scope.row.orderNumber }}</template>
      </el-table-column>
      <el-table-column label="客户姓名" min-width="150">
        <template #default="scope">{{ scope.row.customerName }}</template>
      </el-table-column>
      <el-table-column label="下单日期" min-width="150">
        <template #default="scope">{{ scope.row.orderDate }}</template>
      </el-table-column>
      <el-table-column label="订单金额" min-width="150">
        <template #default="scope">{{ formatCurrency(scope.row.orderAmount) }}</template>
      </el-table-column>
      <el-table-column label="订单状态" min-width="120">
        <template #default="scope">{{ scope.row.orderStatus }}</template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <div class="action-buttons">
            <el-button @click="viewOrder(scope.row)" size="small" type="info">查看订单</el-button>
            <el-button @click="editOrder(scope.row)" size="small" type="primary">修改订单</el-button>
            <el-button @click="deleteOrder(scope.row)" size="small" type="danger">删除订单</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalItems"
        layout="prev, pager, next, jumper"
        background
      />
    </div>

    <!-- 查看订单对话框 -->
    <el-dialog title="订单详情" v-model="viewDialogVisible" width="60%">
      <el-form :model="currentOrder" label-width="120px" class="dialog-form">
        <el-form-item label="订单号">
          <span>{{ currentOrder.orderNumber }}</span>
        </el-form-item>
        <el-form-item label="客户姓名">
          <span>{{ currentOrder.customerName }}</span>
        </el-form-item>
        <el-form-item label="下单日期">
          <span>{{ currentOrder.orderDate }}</span>
        </el-form-item>
        <el-form-item label="订单金额">
          <span>{{ formatCurrency(currentOrder.orderAmount) }}</span>
        </el-form-item>
        <el-form-item label="订单状态">
          <span>{{ currentOrder.orderStatus }}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewDialogVisible = false" type="default">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 修改订单对话框 -->
    <el-dialog title="修改订单" v-model="editDialogVisible" width="60%">
      <el-form :model="currentOrder" label-width="120px" class="dialog-form">
        <el-form-item label="订单号">
          <el-input v-model="currentOrder.orderNumber" disabled />
        </el-form-item>
        <el-form-item label="客户姓名">
          <el-input v-model="currentOrder.customerName" />
        </el-form-item>
        <el-form-item label="下单日期">
          <el-date-picker v-model="currentOrder.orderDate" type="date" />
        </el-form-item>
        <el-form-item label="订单金额">
          <el-input v-model="currentOrder.orderAmount" type="number" />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="currentOrder.orderStatus">
            <el-option label="待发货" value="pending" />
            <el-option label="已发货" value="shipped" />
            <el-option label="已完成" value="completed" />
            <el-option label="已取消" value="canceled" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false" type="default">取消</el-button>
        <el-button type="primary" @click="saveChanges">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'

// 表单数据
const formInline = reactive({
  orderNumber: '',
  customerName: '',
  orderDate: '',
  orderStatus: '',
})

// 表格数据
const tableData = ref([
  {
    orderNumber: 'ORD001',
    customerName: '张三',
    orderDate: '2024-08-01',
    orderAmount: 100.00,
    orderStatus: '已发货'
  },
  {
    orderNumber: 'ORD002',
    customerName: '李四',
    orderDate: '2024-08-05',
    orderAmount: 200.00,
    orderStatus: '待发货'
  },
  // ...更多数据
])

const currentPage = ref(1)
const pageSize = ref(5)
const totalItems = computed(() => tableData.value.length)

const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return tableData.value.slice(start, end)
})

const handlePageChange = (page: number) => {
  currentPage.value = page
}

const onSubmit = () => {
  console.log('查询!')
  // 实际查询逻辑
}

const resetForm = () => {
  formInline.orderNumber = ''
  formInline.customerName = ''
  formInline.orderDate = ''
  formInline.orderStatus = ''
  // 重新加载数据逻辑
}

const editOrder = (row: any) => {
  currentOrder.value = { ...row }
  editDialogVisible.value = true
}

const viewOrder = (row: any) => {
  currentOrder.value = { ...row }
  viewDialogVisible.value = true
}

const deleteOrder = (row: any) => {
  tableData.value = tableData.value.filter(item => item !== row)
}

const saveChanges = () => {
  // 更新数据逻辑
  editDialogVisible.value = false
}

const formatCurrency = (amount: number) => {
  return `$${amount.toFixed(2)}`
}

const currentOrder = ref<any>({})
const viewDialogVisible = ref(false)
const editDialogVisible = ref(false)
</script>

<style scoped>
.container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.demo-form-inline {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  gap: 20px;
}

.el-form-item {
  flex: 1;
  min-width: 200px;
}

.el-input,
.el-select,
.el-date-picker {
  width: 100%;
}

.table-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
}

.dialog-form {
  padding: 20px;
  background-color: #f9f9f9;
}

.dialog-footer {
  text-align: right;
}

.el-table {
  table-layout: fixed;
  background-color: #ffffff;
}

.el-table-column {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .el-form-item {
    flex: 1 1 100%;
  }
}
</style>
